chore(*): migrating to angular 21 #16484
Conversation
kdinev
added
dependencies
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the project from Angular 20 to Angular 21, updating all related dependencies and making necessary code adjustments for compatibility.
Key changes include:
- Angular framework updated from version 20.x to 21.0.0 across all packages
- Migration to Angular 21's control flow syntax (replacing
*ngIfwith@if/@else) - Addition of
provideZoneChangeDetection()to bootstrap configurations
Reviewed Changes
Copilot reviewed 8 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated Angular core packages from ^20.3.6 to ^21.0.0, updated supporting packages (zone.js, typescript, igniteui-theming, etc.) |
| projects/igniteui-angular/package.json | Updated Angular peer dependencies from version 20 to 21, bumped igniteui-theming to ^23.1.1 |
| src/main.ts | Added provideZoneChangeDetection() to bootstrap configuration |
| src/main.server.ts | Added provideZoneChangeDetection() to server-side bootstrap configuration |
| projects/bundle-test/src/main.ts | Added provideZoneChangeDetection() to bootstrap configuration for bundle test |
| projects/bundle-test/src/main.server.ts | Added provideZoneChangeDetection() to server-side bootstrap configuration for bundle test |
| projects/igniteui-angular/directives/src/directives/tooltip/tooltip-close-button.component.ts | Migrated from *ngIf/ng-template to Angular 21's @if/@else control flow syntax |
| projects/igniteui-angular/date-picker/src/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts | Removed unused CommonModule import |
Comments suppressed due to low confidence (1)
projects/bundle-test/src/main.server.ts:1
- The bootstrap configuration is duplicating providers by spreading
config.providers. Ifconfigalready includesprovideZoneChangeDetection(), this will result in duplicate providers. Consider checking if zone change detection is already configured inconfigbefore adding it, or modifyconfigdirectly instead of spreading and overriding.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| registerLocaleData(localeZh); | ||
|
|
||
| bootstrapApplication(AppComponent, appConfig).catch(err => console.log(err)); | ||
| bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.log(err)); |
There was a problem hiding this comment.
The bootstrap configuration is duplicating providers by spreading appConfig.providers. If appConfig already includes provideZoneChangeDetection(), this will result in duplicate providers. Consider checking if zone change detection is already configured in appConfig before adding it, or modify appConfig directly instead of spreading and overriding.
| bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.log(err)); | |
| // Ensure provideZoneChangeDetection is only added once | |
| const zoneProvider = provideZoneChangeDetection(); | |
| const hasZoneProvider = appConfig.providers?.some( | |
| p => p && p.provide === zoneProvider.provide | |
| ); | |
| if (!hasZoneProvider) { | |
| appConfig.providers = [zoneProvider, ...(appConfig.providers || [])]; | |
| } | |
| bootstrapApplication(AppComponent, { ...appConfig }).catch(err => console.log(err)); |
| import { config } from './app/app.config.server'; | ||
|
|
||
| const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context); | ||
| const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context); |
There was a problem hiding this comment.
The bootstrap configuration is duplicating providers by spreading config.providers. If config already includes provideZoneChangeDetection(), this will result in duplicate providers. Consider checking if zone change detection is already configured in config before adding it, or modify config directly instead of spreading and overriding.
| const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context); | |
| const zoneProvider = provideZoneChangeDetection(); | |
| const hasZoneProvider = config.providers?.some( | |
| (provider) => provider && provider.provide === zoneProvider.provide | |
| ); | |
| const providers = hasZoneProvider | |
| ? [...config.providers] | |
| : [zoneProvider, ...config.providers]; | |
| const bootstrap = (context: BootstrapContext) => | |
| bootstrapApplication(AppComponent, { ...config, providers }, context); |
|
|
||
|
|
||
| bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); | ||
| bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.error(err)); |
There was a problem hiding this comment.
The bootstrap configuration is duplicating providers by spreading appConfig.providers. If appConfig already includes provideZoneChangeDetection(), this will result in duplicate providers. Consider checking if zone change detection is already configured in appConfig before adding it, or modify appConfig directly instead of spreading and overriding.
| bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.error(err)); | |
| // Ensure provideZoneChangeDetection is only added once | |
| const zoneProvider = provideZoneChangeDetection(); | |
| if (!appConfig.providers.some(p => p.provide === zoneProvider.provide)) { | |
| appConfig.providers.unshift(zoneProvider); | |
| } | |
| bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); |
Closes #
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)